<script setup>
import GameCategoryCarouselItem from "@/components/FrontComponents/GameCategoryCarouselItem.vue";
import {gameCommonCarouselGetAPI} from "@/api/FrontApi/game.js";
import {ref, onMounted} from "vue";

const requestParams = ref({
  length: 6,
  sort: 3
})

const carouselData = ref([])

const getCarouselData = async () => {
  const res = await gameCommonCarouselGetAPI(requestParams.value)
  carouselData.value = res.data
}

onMounted(() => getCarouselData())
</script>

<template>
  <div class="discount-carousel">
    <div class="container">
      <el-carousel
          class="carousel"
          trigger="click"
          :interval="5000"
          height="380px"
          :motion-blur="true">
        <el-carousel-item class="item" v-for="item in carouselData" :key="item">
          <GameCategoryCarouselItem :game="item"></GameCategoryCarouselItem>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style scoped>
.discount-carousel {
  margin: 10px 0 0 40px;
  .container {
    .carousel {
      padding: 10px 100px;
      .item {
        overflow: visible;
      }
    }
  }
}
</style>
